<template>
	<div class="clock-container">
		<div class="clock" :style="clockStyle">{{ currentTime }}</div>
		<el-dialog :visible.sync="isSettingsVisible">
			<el-form label-position="top">
				<el-form-item label="时钟颜色">
					<el-color-picker v-model="clockColor" />
				</el-form-item>
				<el-form-item label="字体大小">
					<el-slider v-model="fontSize" :min="10" :max="50" />
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				currentTime: "",
				isSettingsVisible: false,
				clockColor: "#ffffff",
				fontSize: 50
			};
		},
		mounted() {
			// 更新当前时间
			setInterval(() => {
				const now = new Date();
				this.currentTime = `${this.formatTime(now.getHours())}:${this.formatTime(
        now.getMinutes()
      )}:${this.formatTime(now.getSeconds())}`;
			}, 1000);
		},
		methods: {
			// 格式化时间显示
			formatTime(time) {
				return time < 10 ? `0${time}` : time;
			}
		},
		computed: {
			clockStyle() {
				return {
					color: this.clockColor,
					fontSize: `${this.fontSize}px`
				};
			}
		}
	};
</script>

<style scoped>
	.clock-container {
		width: 100%;
		height: 100vh;
		background-color: black;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.clock {
		font-size: 5rem;
	}
</style>
